<template>
	<div class="activeTag">
		<div class="tag1">
			<h3>tag 基础用法,可以用type控制类型</h3>
			<el-tag>标签一</el-tag>
			<el-tag type="success">标签二</el-tag>
			<el-tag type="info">标签三</el-tag>
			<el-tag type="warning">标签四</el-tag>
			<el-tag type="danger">标签五</el-tag>
		</div>
		<div class="tag2">
			<h3>可移除标签-closable</h3>
			<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">{{tag.name}}</el-tag>
		</div>
		<div class="tag3">
			<h3>动态编辑标签</h3>
			<el-tag  v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
				{{tag}}
			</el-tag>
			<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tags: [{
					'name': '标签一',
					type: ''
				}, {
					name: '标签二',
					type: 'success'
				}, {
					name: '标签三',
					type: 'info'
				}, {
					name: '标签四',
					type: 'warning'

				}, {
					name: '标签五',
					type: 'danger'
				}],
				dynamicTags: ['标签一', '标签二', '标签三'],
				inputVisible: 'false',
				inputValue: ''
			}
		},
		methods: {
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if(inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			}
		}
	}
</script>

<style>
	.el-tag {
		margin: 0 10px;
	}
	
	.el-tag+.el-tag {
		margin-left: 10px;
	}
	
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>